<!-- @ftlvariable name="serviceApprove" type="com.gxp.web.domain.ZknjServiceApprove" -->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('Approve')" />
    <th:block th:include="include :: datetimepicker-css" />
    <style>
        .thumbnail-item {
            margin-bottom: 10px;
            border: 2px solid transparent;
            cursor: pointer;
        }

        .thumbnail-item.active {
            border-color: #007bff;
            background-color: #e7f1ff;
        }

        .thumbnail-item img {
            max-width: 100%;
            height: auto;
        }
        #pdf-thumbnails {
            max-height: 600px;
            overflow-y: auto;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <div class="row">
        <!--<div class="col-sm-3">
            <div id="pdf-thumbnails" class="list-group">
                <th:block th:each="file, fileStat : ${reportFiles}">
                    <div class="list-group-item thumbnail-item" th:classappend="${fileStat.index == 0}?'active'">
                        <a th:href="'preview?id=199'" target="_blank">
                            <iframe th:src="'preview?id=199#toolbar=0&navpanes=0'" width="100%" height="150" frameborder="0" scrolling="no" style="transform: rotate(90deg);">

                            </iframe>
                        </a>
                    </div>
                </th:block>
            </div>
        </div>-->
        <div class="col-sm-12">
            <form class="form-horizontal m" id="form-approve-edit">
                <input name="expcode" th:value="${expcode}" type="hidden">
                <input id="approveBy" name="approveBy" th:value="${approveBy}" type="hidden">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">状态：</label>
                    <div class="col-sm-8">
                        <select class="form-control" name="approveStatus" id="approveStatus">
                            <option th:value="${@dict.getValue('sys_service_status','pending verification')}" selected>Pending approval</option>
                            <option th:value="${@dict.getValue('sys_service_status','verified')}">Approved</option>
                            <option th:value="${@dict.getValue('sys_service_status','not verified')}">Not Approved</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">Comment：</label>
                    <div class="col-sm-8">
                        <textarea name="approveComment" id="approveComment" class="form-control" maxlength="999" rows="4"></textarea>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
    var prefix = ctx + "system/request2";
    var previewUrl = ctx + "common/preview";

    $("#form-approve-edit").validate({
        focusCleanup: true
    });

    $('#pdf-thumbnails').on('click', '.thumbnail-item', function (e) {
        e.preventDefault();
        $('.thumbnail-item').removeClass('active');
        $(this).addClass('active');

        var file = $(this).data('file');
        console.log("选择的PDF文件为: ", file);
        // 你可以在这里执行其他逻辑，比如预览PDF
    });

    function submitHandler() {
        if ($.validate.form()) {
            // 确认提交提醒，附带提交数据
            $.modal.confirm(generateConfirmContent() , function() {
                // 提交表单数据
                var data = $('#form-approve-edit').serializeArray();
                $.operate.save(prefix + "/verify", data);
            });

        }
    }

    function generateConfirmContent() {
        var approver = $('#approveBy').val();
        var approveStatus = $('#approveStatus option:selected').text();
        var reason = $('#approveComment').val();
        return `<div style="padding: 10px;">
            <p><strong>审批人：</strong>${approver}</p>
            <p><strong>状态：</strong>${approveStatus}</p>
            <p><strong>意见：</strong>${reason}</p>
            <p style="color:red;">请确认以上信息无误后提交。</p>
        </div>`;
    }
</script>
</body>
</html>